<!--
*Author：富行天下团队

 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/Report/OperationDaily.js此处编写
 -->
<template>
  <div>
    <view-grid ref="grid" :columns="columns" :detail="detail" :editFormFields="editFormFields"
      :editFormFileds="editFormFields" :editFormOptions="editFormOptions"
      :searchFormFields="searchFormFields" :searchFormFileds="searchFormFields"
      :searchFormOptions="searchFormOptions" :table="table" :extend="extend">
    </view-grid>
    <div id="didiididi" style="width: 100%;
    visibility:hidden;
    height: 100%;
    position: absolute;
    background: rgba(0,0,0,.5);
    top: 0px;
    z-index: 999;
    ">

      <div id="iuyui" style="    background: #ffffff;
    position: absolute;
    width: 800px;
    height: 300px;
    top: 10%;

    left: 50%;
    margin-left: -400px;
    border-radius: 10px;">
        <div style="border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 12px 15px;
    background-image: linear-gradient(135deg, #0cd7bd 10%, #57c5f7 100%);line-height: 20px;
    font-size: 14px; font-weight: bold; color:#ffffff"> 上传日报文件必须为Excel格式 </div>
        <input style=" padding: 20px 20px 5px 20px;
    font-size: 18px;" type="file" id="Inputid" ref="upload" @change="readExcel"
          accept=".xls, .xlsx" />
        <p style="padding:5px 20px 20px 20px;color:red">注：选择文件-打开 文件自动上传,上传成功会弹窗提示！</p>
        <p style="padding:5px 20px 20px 20px;color:green"></p>
        <div @click="greet" style="padding: 5px 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(45, 183, 245);
    font-size: 16px;
    border-color: rgb(45, 183, 245);
    width: 80px;
    border-radius: 5px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    text-align: center;cursor: pointer;"> 关闭 </div>
      </div>
    </div>
  </div>
</template>

<script>
import extend from "@/extension/Report/OperationDaily.js";
import ViewGrid from "@/components/basic/viewT.vue";

import * as XLSX from "xlsx";

var vueParam = {
  components: {
    ViewGrid,
  },
  data() {
    return {
      table: {
        key: "id",
        footer: "Foots",
        cnName: "富龙营业日报",
        name: "OperationDaily",
        url: "/OperationDaily/",
        sortName: "hotelId",
        paginationSize: 99999999,
        paginationHide: true,
      },

      extend: extend,
      editFormFields: {},
      editFormOptions: [],
      searchFormFields: { operationSection: "", date: "" },
      searchFormOptions: [
        [
          { title: "运营板块", field: "operationSection", type: "like" },
          { title: "创建日期", field: "date", type: "datetime" },
        ],
      ],
      columns: [
        {
          field: "operationSection",
          title: "运营板块",
          type: "string",
          width: 180,
          align: "left",
          sortable: true,
        },
        {
          field: "hotelId",
          title: "酒店id",
          bind: { key: "HotelIdType", data: [] },
          type: "string",
          width: 160,
          align: "left",
        },
        // { field: 'id', title: 'id', type: 'int', width: 90, hidden: true, readonly: true, require: true, align: 'left' },
        {
          field: "projectName",
          title: "项目名称",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "total",
          title: "收入合计",
          type: "decimal",
          width: 90,
          align: "left",
        },
        {
          field: "groupHospitality",
          title: "集团招待",
          type: "decimal",
          width: 90,
          align: "left",
        },
        {
          field: "cashInflow",
          title: "当日现金流入",
          type: "decimal",
          width: 90,
          align: "left",
        },
        {
          field: "roomOfRent",
          title: "出租房间数",
          type: "decimal",
          width: 90,
          align: "left",
        },
        {
          field: "avgHousePrice",
          title: "房均价",
          type: "decimal",
          width: 90,
          align: "left",
        },
        {
          field: "numOfRoomsAvailable",
          title: "可用房间数",
          type: "decimal",
          width: 90,
          align: "left",
        },
        {
          field: "occupancyRate",
          title: "出租率/上座率",
          type: "decimal",
          width: 90,
          align: "left",
        },
        {
          field: "numOfConsumers",
          title: "消费人数",
          type: "decimal",
          width: 90,
          align: "left",
        },
        {
          field: "perCapitaConsnumption",
          title: "人均消费",
          type: "decimal",
          width: 90,
          align: "left",
        },
        {
          field: "date",
          title: "日期",
          type: "datetime",
          width: 150,
          align: "left",
          sortable: true,
        },
      ],
      detail: {
        cnName: "#detailCnName",
        columns: [],
        sortName: "",
        key: "",
      },
    };
  },
  methods: {
    greet() {
      var empty = document.getElementById("didiididi");
      empty.style.visibility = "hidden";
    },
    readExcel(e) {
      //  console.log()
      const files = e.target.files;
      const fileReader = new FileReader();
      fileReader.readAsBinaryString(files[0]);
      const emptyIN = document.getElementById("Inputid");
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
          }); // 二进制读取
          const wsname = workbook.SheetNames[0]; // 取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); // 生成json表格内容
          const filesName = files[0].name;
          var aaa = filesName.split(".")[0];
          var bbb = aaa.split("(")[0];
          console.log(bbb);
          var urlData = {
            name: bbb,
            data: ws,
          };

          var rdata = JSON.stringify(urlData);
          var senddata = rdata
            .replace(/\r\n/g, "")
            .replace(/\n/g, "")
            .replace(/\s+/g, "");
          //1、创建xhr的对象
          let xhr = new XMLHttpRequest();
          //2、调用open函数('请求类型','url')
          xhr.open("POST", process.env.VUE_APP_BASE_URL + "kuaibao/saveExcelData");
          //3、设置 Content-Type属性
          xhr.setRequestHeader(
            "Content-Type",
            "application/x-www-form-urlencoded; charset=UTF-8"
          );
          //4、调用send函数
          xhr.send(senddata);
          //5、监听事件
          var _this = this;

          xhr.onreadystatechange = function () {
            let result = JSON.parse(xhr.responseText);

            if (xhr.readyState == 4 && result.code == 200) {
              _this.$refs["upload"].value = "";
              alert(filesName + "上传成功");
            } else {
              // alert(filesName+'上传失败')
              _this.$refs["upload"].value = "";
              alert(result.msg);
            }
            urlData = {};
          };
          // emptyIN.outerHTML = emptyIN.outerHTML
        } catch (e) {
          return false;
        }
      };
    },
  },
};
export default vueParam;
</script>
